<template>
	<view class="wifi">
		<view class="banner">
			<image :src="baseUrl + '/wximage/img/wifi_tubiao.png'"></image>
		</view>
		<view class="content">
			<view class="title">WiFi配置</view>
			<view class="desc">账号：{{username}}</view>
			<view class="desc">
				密码：{{password}}
				<text class="copy" @click="copy">复制</text>
			</view>
		</view>
		<view class="lianjie" @click="onChangeWifi">一键连接</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				usernames: '',
				username: '',
				password: '',
				passwords: '',
				qrcode: '',
			}
		},
		onLoad(options) {
			this.qrcode = options.qrcode;
			
			this.request({
				url: '/xcx/devicewifiinfo',
				data: {
					qrcode: this.qrcode
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.usernames = res.data.data.username;
					this.passwords = res.data.data.password;
					
					this.authorize() // 开始权限判断及申请
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			});
		},
		methods: {
			// 获取用户授权设置
			authorize() {
				let that = this
				uni.getSetting({
					success(res) {
						console.log('setting', res)
						if (!res.authSetting['scope.userLocation']) {
							// 申请获取地理位置权限
							uni.authorize({
								scope: 'scope.userLocation',
								success: (res) => {
									console.log('authorize succ', res)

								},
								fail: (e) => {
									console.log('authorize fail', e)
								}
							})
						} else {
							// 开始wifi模块使用
							that.startWifi()
						}
					}
				})
			},
			// 获取wifi列表
			startWifi() {
				uni.showLoading({
					title: '正在搜索可连接wifi',
				})

				let that = this;

				uni.startWifi({
					success: (res) => {
						uni.getWifiList({
							success: (res) => {
								uni.onGetWifiList(res => {
									if (res.wifiList.length !== 0) {
										// 可以对获取的wifi列表进行数据处理或者筛选
										// 根据项目要求展示wifi列表界面
										uni.hideLoading();
										for (let i = 0; i < res.wifiList.length; i++) {
											if (res.wifiList[i].SSID == that.usernames) {
												that.username = res.wifiList[i].SSID;
												that.password = that.passwords;
											}
										}
									} else {
										uni.showToast({
											title: '暂无可连接wifi,请重试',
											icon: 'none'
										})
									}
								})
							},
							fail: (e) => {
								console.log('获取wifi列表失败', e)
								uni.showToast({
									title: '请开启wifi',
									icon: 'none'
								})
								uni.hideLoading({})
							}
						})
					},
					fail: (e) => {
						console.log('wifi连接失败', e)
						uni.showToast({
							title: '请开启wifi',
							icon: 'none'
						})
						uni.hideLoading({})
					},
				})
			},

			// 选择wifi连接
			onChangeWifi() {
				let that = this
				let SSID = this.username;
				let BSSID = this.password;

				uni.connectWifi({
					SSID: SSID,
					password: BSSID,
					forceNewApi: true,
					success: function(res) {
						console.log('connectWifi suc', res)
						uni.showToast({
							title: '连接成功',
							icon: 'none'
						})
					},
					fail: function(e) {
						let that = this;
						let content = '自动连接失败。请手动进入系统wifi页面连接。';
						wx.showModal({
							title: '提示',
							content: content,
							showCancel: false,
							success() {
								
							}
						})
					}
				})
			},

			copy() {
				let text = this.password;

				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.wifi {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: linear-gradient(to bottom, #95efff, #55d7ff);
		padding-top: 114rpx;

		.banner {
			width: 100%;
			margin: 0 auto;
			text-align: center;
			margin-bottom: 120rpx;

			image {
				width: 480rpx;
				height: 480rpx;
			}
		}

		.content {
			width: 560rpx;
			margin: 0 auto;
			background: rgba(255, 255, 255, 0.2);
			padding: 40rpx 70rpx 20rpx;
			box-sizing: border-box;
			border-radius: 24rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				color: #FFFFFF;
				width: 100%;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.desc {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 40rpx;

				.copy {
					font-size: 20rpx;
					color: #FFFFFF;
					width: 60rpx;
					text-align: center;
					height: 28rpx;
					line-height: 28rpx;
					border-radius: 14rpx;
					border: 1rpx solid #FFFFFF;
					display: inline-block;
					margin-left: 32rpx;
				}
			}
		}

		.lianjie {
			width: 560rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #54D7FF;
		}
	}
</style>